<template>
  <div class="app-container">
    <Find :OriginalFilter="{ static: true }" :formList="formList" />
    <div class="container">
      <el-card class="containerCard" shadow="always" :body-style="{ padding: '0' }">
        <div style="display: flex">
          <!-- 左 -->
          <div class="containerCardLeft">
            <div class="containerCardLeftHeader">
              <h1 class="containerCardLeftHeaderH1">冲裁配套状况</h1>
              <p class="containerCardLeftHeaderP">勾选筛选配套餐数量>0指令 勾选筛选全部配套指令</p>
              <div class="containerCardLeftHeaderDiv">
                <p>
                  <el-checkbox>{{}}</el-checkbox>
                  <el-checkbox>{{}}</el-checkbox>
                </p>

                <p class="containerCardLeftHeaderDivP">
                  <el-checkbox>{{}}</el-checkbox>
                  <el-checkbox>{{}}</el-checkbox>
                </p>

                <p style="margin-left: 60px">
                  <el-checkbox>{{}}</el-checkbox>
                  <el-checkbox>{{}}</el-checkbox>
                </p>
              </div>
            </div>
            <Table :tableData="tableData" :tableHeader="tableHeader" :TableHeight="595" />
          </div>

          <!-- 中 -->
          <div class="containerCardMain">
            <h1 class="containerCardLeftHeaderH1">冲裁配套明细</h1>
            <Table :tableData="tableData2" :tableHeader="tableHeader2" :TableHeight="595" />
          </div>

          <!-- 右 -->
          <div class="containerCardRight">
            <h1 style="font-size: 16px; margin-top: 13px">部位已制/已缴明细</h1>
            <div class="containerCardRightDiv">
              <el-form-item label="选择制程" style="font-size: 9px; width: 162px; height: 30px">
                <el-select placeholder=" " size="small"> </el-select>
              </el-form-item>

              <el-checkbox>未配套部位</el-checkbox>
            </div>

            <Table :tableData="tableData3" :tableHeader="tableHeader3" :TableHeight="521" />
          </div>
        </div>

        <!-- 底部按钮 -->
        <div class="bottom">
          <el-button style="background-color: #e7e7e7; width: 60px; color: #000000; border: none" type="info" size="small">保存</el-button>
          <el-button style="background-color: #f89027; width: 60px" type="warning" size="small">打印</el-button>
        </div>
      </el-card>
    </div>
  </div>
</template>
<script lang="ts">
import { defineComponent, ref } from 'vue'
import JMessage from '@/utils/JMessage'
export default defineComponent({
  name: 'CuttingAndMatch'
})
</script>
<script lang="ts" setup>
import { i18n, Jzhcn } from '@/i18n'
const formList = ref([
  {
    type: 'input',
    inputPlaceholder: '请输入指令',
    inputValue: ''
  },
  {
    type: 'input',
    inputPlaceholder: '请输入型体',
    inputValue: ''
  },
  {
    type: 'checkbox',
    checkboxLabel: '冲料已配套'
  },
  {
    type: 'checkbox',
    checkboxLabel: '高频已配套'
  },
  {
    type: 'checkbox',
    checkboxLabel: '配套仓已配套'
  },
  {
    type: 'button',
    checkboxLabel: '置空',
    bgColor: '#1890FF'
  },
  {
    type: 'button',
    checkboxLabel: '导出配套资料'
  },
  {
    type: 'date',
    dateLabel: '报表日期',
    dateValue: ''
  },
  {
    type: 'button',
    checkboxLabel: '冲裁达成率'
  }
])
const findData = (a: any) => {
  console.log(a)
}

const tableHeader = ref([
  {
    label: '指令',
    prop: 'customer',
    width: '112px'
  },
  {
    label: '型体',
    prop: 'customer',
    width: '108px'
  },
  {
    label: '订单数量',
    prop: 'customer',
    width: '108px'
  },
  {
    label: '冲裁已配套',
    prop: 'customer',
    width: '108px'
  },
  {
    label: '高频已配套',
    prop: 'customer',
    width: '108px'
  },
  {
    label: '配套数量',
    prop: 'customer',
    width: '112px'
  }
])
const tableData = ref([
  {
    customer: '2023-5-5002',
    unInvested: '222222222222222222',
    investedQuantity: '222222'
  },
  {
    customer: '2023-5-5002',
    unInvested: '222222',
    investedQuantity: '222222'
  },
  {
    customer: '2023-5-5002',
    unInvested: '222222',
    investedQuantity: '222222'
  },
  {
    customer: '2023-5-5002',
    unInvested: '222222',
    investedQuantity: '222222'
  },
  {
    customer: '2023-5-5002',
    unInvested: '222222',
    investedQuantity: '222222'
  },
  {
    customer: '2023-5-5002',
    unInvested: '222222',
    investedQuantity: '222222'
  },
  {
    customer: '2023-5-5002',
    unInvested: '222222',
    investedQuantity: '222222'
  },
  {
    customer: '2023-5-5002',
    unInvested: '222222',
    investedQuantity: '222222'
  },
  {
    customer: '2023-5-5002',
    unInvested: '222222',
    investedQuantity: '222222'
  },
  {
    customer: '2023-5-5002',
    unInvested: '222222',
    investedQuantity: '222222'
  },
  {
    customer: '2023-5-5002',
    unInvested: '222222',
    investedQuantity: '222222'
  },
  {
    customer: '2023-5-5002',
    unInvested: '222222',
    investedQuantity: '222222'
  },
  {
    customer: '2023-5-5002',
    unInvested: '222222',
    investedQuantity: '222222'
  },
  {
    customer: '2023-5-5002',
    unInvested: '222222',
    investedQuantity: '222222'
  },
  {
    customer: '2023-5-5002',
    unInvested: '222222',
    investedQuantity: '222222'
  },
  {
    customer: '2023-5-5002',
    unInvested: '222222',
    investedQuantity: '222222'
  },
  {
    customer: '2023-5-5002',
    unInvested: '222222',
    investedQuantity: '222222'
  },
  {
    customer: '2023-5-5002',
    unInvested: '222222',
    investedQuantity: '222222'
  },
  {
    customer: '2023-5-5002',
    unInvested: '222222',
    investedQuantity: '222222'
  },
  {
    customer: '2023-5-5002',
    unInvested: '222222',
    investedQuantity: '222222'
  },
  {
    customer: '2023-5-5002',
    unInvested: '222222',
    investedQuantity: '222222'
  },
  {
    customer: '2023-5-5002',
    unInvested: '222222',
    investedQuantity: '222222'
  },
  {
    customer: '2023-5-5002',
    unInvested: '222222',
    investedQuantity: '222222'
  },
  {
    customer: '2023-5-5002',
    unInvested: '222222',
    investedQuantity: '222222'
  }
])

const tableHeader2 = ref([
  {
    label: '号码',
    prop: 'number',
    width: '112px'
  },
  {
    label: '订单数量',
    prop: 'number',
    width: '112px'
  },
  {
    label: '冲裁已配套',
    prop: 'number',
    width: '112px'
  },
  {
    label: '高频已配套',
    prop: 'number',
    width: '112px'
  },
  {
    label: '配套数量',
    prop: 'number',
    width: '112px'
  }
])
const tableData2 = ref([
  {
    number: '2023-5-5002',
    orderQuantity: '222222',
    investedQuantity: '222222',
    unInvestedQuantity: '222222',
    productionQuantity: '222222',
    unProductionQuantity: '222222',
    inProductionQuantity: '222222'
  },
  {
    number: '2023-5-5002',
    orderQuantity: '222222',
    investedQuantity: '222222',
    unInvestedQuantity: '222222',
    productionQuantity: '222222',
    unProductionQuantity: '222222',
    inProductionQuantity: '222222'
  },
  {
    number: '2023-5-5002',
    orderQuantity: '222222',
    investedQuantity: '222222',
    unInvestedQuantity: '222222',
    productionQuantity: '222222',
    unProductionQuantity: '222222',
    inProductionQuantity: '222222'
  },
  {
    number: '2023-5-5002',
    orderQuantity: '222222',
    investedQuantity: '222222',
    unInvestedQuantity: '222222',
    productionQuantity: '222222',
    unProductionQuantity: '222222',
    inProductionQuantity: '222222'
  },
  {
    number: '2023-5-5002',
    orderQuantity: '222222',
    investedQuantity: '222222',
    unInvestedQuantity: '222222',
    productionQuantity: '222222',
    unProductionQuantity: '222222',
    inProductionQuantity: '222222'
  },
  {
    number: '2023-5-5002',
    orderQuantity: '222222',
    investedQuantity: '222222',
    unInvestedQuantity: '222222',
    productionQuantity: '222222',
    unProductionQuantity: '222222',
    inProductionQuantity: '222222'
  },
  {
    number: '2023-5-5002',
    orderQuantity: '222222',
    investedQuantity: '222222',
    unInvestedQuantity: '222222',
    productionQuantity: '222222',
    unProductionQuantity: '222222',
    inProductionQuantity: '222222'
  },
  {
    number: '2023-5-5002',
    orderQuantity: '222222',
    investedQuantity: '222222',
    unInvestedQuantity: '222222',
    productionQuantity: '222222',
    unProductionQuantity: '222222',
    inProductionQuantity: '222222'
  },
  {
    number: '2023-5-5002',
    orderQuantity: '222222',
    investedQuantity: '222222',
    unInvestedQuantity: '222222',
    productionQuantity: '222222',
    unProductionQuantity: '222222',
    inProductionQuantity: '222222'
  },
  {
    number: '2023-5-5002',
    orderQuantity: '222222',
    investedQuantity: '222222',
    unInvestedQuantity: '222222',
    productionQuantity: '222222',
    unProductionQuantity: '222222',
    inProductionQuantity: '222222'
  },
  {
    number: '2023-5-5002',
    orderQuantity: '222222',
    investedQuantity: '222222',
    unInvestedQuantity: '222222',
    productionQuantity: '222222',
    unProductionQuantity: '222222',
    inProductionQuantity: '222222'
  },
  {
    number: '2023-5-5002',
    orderQuantity: '222222',
    investedQuantity: '222222',
    unInvestedQuantity: '222222',
    productionQuantity: '222222',
    unProductionQuantity: '222222',
    inProductionQuantity: '222222'
  },
  {
    number: '2023-5-5002',
    orderQuantity: '222222',
    investedQuantity: '222222',
    unInvestedQuantity: '222222',
    productionQuantity: '222222',
    unProductionQuantity: '222222',
    inProductionQuantity: '222222'
  },
  {
    number: '2023-5-5002',
    orderQuantity: '222222',
    investedQuantity: '222222',
    unInvestedQuantity: '222222',
    productionQuantity: '222222',
    unProductionQuantity: '222222',
    inProductionQuantity: '222222'
  },
  {
    number: '2023-5-5002',
    orderQuantity: '222222',
    investedQuantity: '222222',
    unInvestedQuantity: '222222',
    productionQuantity: '222222',
    unProductionQuantity: '222222',
    inProductionQuantity: '222222'
  },
  {
    number: '2023-5-5002',
    orderQuantity: '222222',
    investedQuantity: '222222',
    unInvestedQuantity: '222222',
    productionQuantity: '222222',
    unProductionQuantity: '222222',
    inProductionQuantity: '222222'
  },
  {
    number: '2023-5-5002',
    orderQuantity: '222222',
    investedQuantity: '222222',
    unInvestedQuantity: '222222',
    productionQuantity: '222222',
    unProductionQuantity: '222222',
    inProductionQuantity: '222222'
  },
  {
    number: '2023-5-5002',
    orderQuantity: '222222',
    investedQuantity: '222222',
    unInvestedQuantity: '222222',
    productionQuantity: '222222',
    unProductionQuantity: '222222',
    inProductionQuantity: '222222'
  },
  {
    number: '2023-5-5002',
    orderQuantity: '222222',
    investedQuantity: '222222',
    unInvestedQuantity: '222222',
    productionQuantity: '222222',
    unProductionQuantity: '222222',
    inProductionQuantity: '222222'
  },
  {
    number: '2023-5-5002',
    orderQuantity: '222222',
    investedQuantity: '222222',
    unInvestedQuantity: '222222',
    productionQuantity: '222222',
    unProductionQuantity: '222222',
    inProductionQuantity: '222222'
  },
  {
    number: '2023-5-5002',
    orderQuantity: '222222',
    investedQuantity: '222222',
    unInvestedQuantity: '222222',
    productionQuantity: '222222',
    unProductionQuantity: '222222',
    inProductionQuantity: '222222'
  },
  {
    number: '2023-5-5002',
    orderQuantity: '222222',
    investedQuantity: '222222',
    unInvestedQuantity: '222222',
    productionQuantity: '222222',
    unProductionQuantity: '222222',
    inProductionQuantity: '222222'
  },
  {
    number: '2023-5-5002',
    orderQuantity: '222222',
    investedQuantity: '222222',
    unInvestedQuantity: '222222',
    productionQuantity: '222222',
    unProductionQuantity: '222222',
    inProductionQuantity: '222222'
  },
  {
    number: '2023-5-5002',
    orderQuantity: '222222',
    investedQuantity: '222222',
    unInvestedQuantity: '222222',
    productionQuantity: '222222',
    unProductionQuantity: '222222',
    inProductionQuantity: '222222'
  },
  {
    number: '2023-5-5002',
    orderQuantity: '222222',
    investedQuantity: '222222',
    unInvestedQuantity: '222222',
    productionQuantity: '222222',
    unProductionQuantity: '222222',
    inProductionQuantity: '222222'
  },
  {
    number: '2023-5-5002',
    orderQuantity: '222222',
    investedQuantity: '222222',
    unInvestedQuantity: '222222',
    productionQuantity: '222222',
    unProductionQuantity: '222222',
    inProductionQuantity: '222222'
  },
  {
    number: '2023-5-5002',
    orderQuantity: '222222',
    investedQuantity: '222222',
    unInvestedQuantity: '222222',
    productionQuantity: '222222',
    unProductionQuantity: '222222',
    inProductionQuantity: '222222'
  },
  {
    number: '2023-5-5002',
    orderQuantity: '222222',
    investedQuantity: '222222',
    unInvestedQuantity: '222222',
    productionQuantity: '222222',
    unProductionQuantity: '222222',
    inProductionQuantity: '222222'
  },
  {
    number: '2023-5-5002',
    orderQuantity: '222222',
    investedQuantity: '222222',
    unInvestedQuantity: '222222',
    productionQuantity: '222222',
    unProductionQuantity: '222222',
    inProductionQuantity: '222222'
  },
  {
    number: '2023-5-5002',
    orderQuantity: '222222',
    investedQuantity: '222222',
    unInvestedQuantity: '222222',
    productionQuantity: '222222',
    unProductionQuantity: '222222',
    inProductionQuantity: '222222'
  },
  {
    number: '2023-5-5002',
    orderQuantity: '222222',
    investedQuantity: '222222',
    unInvestedQuantity: '222222',
    productionQuantity: '222222',
    unProductionQuantity: '222222',
    inProductionQuantity: '222222'
  },
  {
    number: '2023-5-5002',
    orderQuantity: '222222',
    investedQuantity: '222222',
    unInvestedQuantity: '222222',
    productionQuantity: '222222',
    unProductionQuantity: '222222',
    inProductionQuantity: '222222'
  }
])

const tableHeader3 = ref([
  {
    label: '部位',
    prop: 'department',
    width: '112px'
  },
  {
    type: 'select',
    label: '制程',
    prop: 'process',
    width: '60px'
  },
  {
    label: '已制/已缴数量',
    prop: 'quantity',
    width: '80px'
  },
  {
    label: '未制/未缴数量',
    prop: 'department',
    width: '80px'
  },
  {
    label: '采集日期',
    prop: 'date',
    width: '70px'
  }
])
const tableData3 = ref([
  {
    department: '部门1',
    date: '2021-05-01',
    quantity: '222222',
    process: {
      selectValue: 'option1',
      options: [
        {
          key: '1',
          label: 'option1',
          value: '111111'
        },
        {
          key: '2',
          label: 'option2',
          value: '22222222222'
        }
      ]
    }
  }
])
</script>

<style lang="less" scoped>
// 整体
.container {
  width: 100%;
  height: 720px;
  margin-top: 20px;
}

// 卡片
.containerCard {
  width: 100%;
  height: 100%;
  box-shadow: none;
}

//主体 左
.containerCardLeft {
  width: 40%;
  height: 670px;

  .containerCardLeftHeaderP {
    width: 159px;
    color: #0482ff;
    font-size: 10px;
    line-height: 20px;
    margin-left: 80px;
  }

  .containerCardLeftHeaderDiv {
    width: 200px;
    height: 55px;
    display: flex;
    margin-left: 20px;
  }
}

// 主体 中
.containerCardMain {
  width: 35%;
  height: 670px;
  margin-top: 10px;
}

// 主体 右
.containerCardRight {
  width: 25%;
  height: 670px;
}

.containerCardLeftHeader {
  margin-top: 10px;
  display: flex;
}

.containerCardLeftHeaderDivP {
  margin-left: 50px;
}

//H1文字 大小
.containerCardLeftHeaderH1 {
  width: 100px;
  font-size: 16px;
  margin-left: 20px;
  margin-bottom: 33px;
}

// 右侧表格
.containerCardRightDiv {
  display: flex;
  margin-top: 50px;
  justify-content: space-between;
  width: 70%;
}

// 底部表格
.bottom {
  display: flex;
  justify-content: right;
}
</style>
